<template>
	<div class="header">城市选择
		<router-link to="/">
			<div class="iconfont header-back">&#xe64e;</div>
		</router-link>
    <div class="mp-tab-con">
        <ul>
            <li v-bind:class="{active:isActive}" v-on:click="changeActicve();changeHome()">境内</li>
            <li v-bind:class="{active:!isActive}" 
                v-on:click="changeActicve();changeAbroadcity();">境外·港澳台嗷</li>
        </ul>
    </div>
	</div>
</template>
 
 <script>
  import axios from 'axios'
 	export default {
 		name: 'CityHeader',
    data () {
        return {
          isActive:true,
        }
    },
    methods:{
        changeActicve () {
            this.isActive=!this.isActive
        },
        changeAbroadcity () {
          this.$emit('acceptChange')
        },
        changeHome () {
          this.$emit('acceptChanges')
        },

    },

 	}
 </script>


<style lang="stylus" scoped>
  @import '~__STYLES__/varibles.styl'
  .header
    position: relative
    overflow: hidden
    height: 1.66rem
    line-height: $headerHeight
    text-align: center
    color: #fff
    background: $bgColor
    font-size: .32rem
    .header-back
      position: absolute
      top: 0
      left: 0
      width: .64rem
      text-align: center
      font-size: .4rem
      color: #fff	
  .mp-tab-con 
    height: .4rem;
    line-height: .4rem;
    background-color: #00bcd4;
    padding: .2rem 1rem;
    color: #fff
  .mp-tab-con ul 
    border: 1px solid #fff;
    border-radius: .03rem;
    zoom: 1;
    overflow: hidden;
  .mp-tab-con li.active
    background-color: #fff;
    color: #00bcd4;
  .mp-tab-con li 
    width: 50%;
    float: left;
    text-align: center;
    background-color: #00bcd4;
    font-size: .28rem;
    color: #fff;
</style>